<template>
  <el-container style="height: 100%; padding: 15px; border-radius: 10px">
    <el-aside style="height: 100%" width="200px" class="side-menu-container">
      <div class="title">
        <img :src="logo" class="logo" />
        <h3 style="color: black">产商品AI智配精灵</h3>
      </div>
      <el-menu
        default-active="1"
        class="el-menu-vertical-demo side-menu"
        :collapse="isCollapse"
        style="height: 100%; width: 201px"
      >
        <template v-for="item in menuLst" :key="item.key">
          <el-menu-item
            :index="item.index"
            @click="item.click"
            class="menu-item"
            :class="{ 'menu-active': index === item.index }"
          >
            <el-icon>
              <component :is="item.icon"></component>
            </el-icon>
            <span>{{ item.title }}</span>
          </el-menu-item>
        </template>
      </el-menu>
    </el-aside>
    <el-main class="main-container">
      <router-view />
    </el-main>
  </el-container>
</template>

<script lang="js" setup>
import { ref, shallowRef ,watch } from 'vue'
import { useRouter ,useRoute} from 'vue-router'
import {
    Document as IconDocument,
    Menu as IconMenu
} from '@element-plus/icons-vue'
import logo from '@/assets/svg/logo.svg'

const index = ref('1')
const route = useRoute(); // 获取当前路由信息
watch(
  () => route.path, // 侦听路由路径变化
  (newPath) => {
    if (newPath === '/input') {
      index.value = '1';
    } else {
      index.value = '2';
    }
  },
);

const router = useRouter()
const isCollapse = ref(false)
const menuLst = ref([
    {
        key: "input",
        index: "1",
        title: '录入',
        icon: shallowRef(IconDocument),
        click: () => {
            index.value = '1'
            router.push({
                name: 'input'
            })
        }
    },
    {
        key: "result",
        index: "2",
        title: '分析结果',
        icon: shallowRef(IconMenu),
        click: () => {
            index.value = '2'
            router.push({
                name: 'result'
            })
        }
    }
])
</script>

<style lang="less">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* --el-aside-width: 50px; */
  // text-align: center;   控制label的对齐方式
  color: #2c3e50;
}
.menu-active {
  padding: 5px;
  --el-menu-bg-color: white;
  --el-menu-text-color: #fff;
  --el-menu-active-color: #fff;

  height: 50px;
  border-radius: 12px;
}

.side-menu-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-color: white;
  overflow: hidden;
  padding: 5px;
  border-radius: 10px;

  .title {
    display: flex;
    align-items: center;
    justify-content: center;
    .logo {
      background-color: white;
      width: 40px;
      height: 40px;
      margin-right: 10px;
    }
  }
}

.side-menu-container {
  color: #fff;
  font-size: 14px;
}

/* 侧边栏 */
.side-menu {
  padding: 5px;
  --el-menu-bg-color: white;
  --el-menu-text-color: #fff;
  --el-menu-active-color: #fff;

  .menu-item {
    height: 50px;
    border-radius: 12px;
  }
}

.side-menu {
  padding: 5px;
  --el-menu-bg-color: white;
  --el-menu-text-color: #1096f1;
  --el-menu-active-color: #fff;

  .el-menu-item {
    height: 50px;
    border-radius: 12px;
    color: black;
    transition: all 3s ease;

    &:hover {
      background: linear-gradient(to right, #3d61fd, rgba(0, 0, 139, 0));
    }

    &.menu-active {
      background: linear-gradient(
        to right,
        #3d61fd,
        rgba(0, 0, 139, 0)
      ) !important;
      color: #fff !important;
    }
  }
}

.main-container {
  --el-main-padding: 0;
}
</style>
